<!--
 *@Date: 2023-01-31 17:18:02
 * @LastEditTime: 2023-02-09 09:56:56
 *
 * @Description:
-->
<template>
    <view class="content">
        <view class="title">欢迎注册数据世界</view>
<!--        <view style="padding:20rpx">-->
<!--            <uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="left" label-width="180rpx"-->
<!--                label-align="right">-->
<!--                <uni-forms-item name="tx" label="头像" required>-->
<!--                    <data-image update v-model="formData.tx" />-->
<!--                </uni-forms-item>-->
<!--                <uni-forms-item name="yhxm" label="昵称" required>-->
<!--                    <uni-easyinput v-model="formData.yhxm" prefixIcon="person" placeholder="请输入昵称">-->
<!--                    </uni-easyinput>-->
<!--                </uni-forms-item>-->
<!--                <uni-forms-item name="yhdm" label="用户名" required>-->
<!--                    <uni-easyinput prefixIcon="person" v-model="formData.yhdm" placeholder="请输入用户名">-->
<!--                    </uni-easyinput>-->
<!--                </uni-forms-item>-->
<!--                <uni-forms-item name="yhmm" label="密码" required>-->
<!--                    <uni-easyinput type="password" prefixIcon="locked" v-model="formData.yhmm" placeholder="请输入密码">-->
<!--                    </uni-easyinput>-->
<!--                </uni-forms-item>-->
<!--                <uni-forms-item name="lxdh" label="联系电话" required>-->
<!--                    <uni-easyinput prefixIcon="phone" type="number" v-model="formData.lxdh" placeholder="请输入联系电话">-->
<!--                    </uni-easyinput>-->
<!--                </uni-forms-item>-->
<!--                <uni-forms-item name="yhyx" label="用户邮箱" required>-->
<!--                    <uni-easyinput prefixIcon="email" v-model="formData.yhyx" placeholder="请输入邮箱">-->
<!--                    </uni-easyinput>-->
<!--                </uni-forms-item>-->
<!--                <uni-forms-item name="bz" label="备注" required>-->
<!--                    <uni-easyinput prefixIcon="compose" v-model="formData.bz" placeholder="请输入备注">-->
<!--                    </uni-easyinput>-->
<!--                </uni-forms-item>-->
<!--                <button @tap="register" style="margin-top:120rpx" type="primary">注册</button>-->
<!--            </uni-forms>-->
<!--        </view>-->
    </view>
</template>

<script setup lang="ts">
import RegisterModelImp from "../model/RegisterModelImp";
import { reactive, ref } from "vue";
const form = ref()
const rules = {
    tx: {
        rules: [{
            required: true,
            errorMessage: '请上传头像',
        }
        ]
    },
    yhxm: {
        rules: [{
            required: true,
            errorMessage: '请输入昵称',
        }
        ]
    },
    yhdm: {
        rules: [{
            required: true,
            errorMessage: '请输入用户名',
        }
        ]
    },
    yhmm: {
        rules: [{
            required: true,
            errorMessage: '请输入密码',
        },
        {
            minLength: 6,
            errorMessage: '密码长度最少需要{minLength}个字符',
        }
        ]
    },
    lxdh: {
        rules: [
            {
                validateFunction: (rule: any, value: any, data: any, callback: any) => {
                    if (value.length !== 11) {
                        callback("联系电话必须为11位")
                    }
                    return true

                },
            }
        ]
    },
    yhyx: {
        rules: [{
            format: "email",
            errorMessage: '邮箱格式错误',
        }
        ]
    },

}
const formData = reactive({
    tx: "",
    yhxm: "",
    yhdm: "",
    yhmm: "",
    lxdh: "",
    yhyx: "",
    bz: ""
})

const register = () => {
    form.value.validate().then(() => {
        const registerModelImp = new RegisterModelImp();
        return registerModelImp.UserRegister(formData).then((res: any) => {
            if (res.data.status) {
                uni.showToast({
                    title: '注册成功',
                    icon: 'none'
                })
                setTimeout(() => {
                    uni.navigateBack()
                }, 1000)
            }
            console.log(res)
        }).catch((err) => {
            console.log(err)
        })
    }).catch((err: any) => {
        console.log('表单错误信息：', err);
    })

}
</script>

<style lang="scss" scoped>
.content {
    width: calc(100% - 80rpx);
    padding: 100rpx 40rpx;

    .title {
        font-size: 56rpx;
        text-align: center;
    }

    .bottom {
        background-color: #ffffff;
        width: calc(100% - 80rpx);
        font-size: 28rpx;
        text-align: center;
        position: fixed;
        padding: 20rpx;
        bottom: 0rpx;

        text {
            color: $uni-color-primary;
        }
    }
}
</style>
